<template>
	<view class="webview-container">
		<!-- v-if="mapUrl" 确保在URL计算完成后再渲染组件 -->
		<web-view v-if="mapUrl" :src="mapUrl" @onPostMessage="handlePostMessage" @message="handleWindowMessage"></web-view>
	</view>
</template>

<script>
	
	import { getPlaceDetail } from '@/utils/mapService.js'; 
	export default {
		data() {
			return {
				mapUrl: '',
				eventChannel: null
			};
		},
		onLoad() {
			this.eventChannel = this.getOpenerEventChannel();
			
			this.loadMapWithLocation(null, null);
			// #ifdef H5
			// 监听map.html事件
			window.addEventListener("message", this.handleWindowMessage, false);
			// #endif
		},
		onUnload(){
			console.log("【H5】移除 window message 事件监听器");
			// #ifdef H5
			window.removeEventListener('message', this.handleWindowMessage);
			// #endif
		},
		methods: {
			// webview向外部发送消息
			handlePostMessage: function(data) {
				console.log("接收到消息：" + JSON.stringify(data.detail));
			},
			async handleWindowMessage(event) {
				
				// #ifdef H5
				const data = event.data.detail.data[0];
				// #endif
				// #ifndef H5
				const data = event.detail.data[0];
				// #endif
				
				console.log('map-picker:收到来自网页的消息：',data);
				if (data && data.type === 'locationSelected') {
					const basicLocationInfo = data.payload;
					
					
					// 检查是否有 uid
					if (basicLocationInfo.uid) {
						uni.showLoading({ title: '正在获取详情...' });
						try {
							// 使用 uid 调用新的 API 获取详细信息
							const detailedInfo = await getPlaceDetail(basicLocationInfo.uid);
							console.log('地点detailedInfo：',detailedInfo);
							// 将详细信息回传给 release.vue
							if (this.eventChannel) {
								this.eventChannel.emit('onLocationSelect', detailedInfo);
							}
							uni.navigateBack();
	
						} catch (error) {
							uni.showToast({
								title: '获取地点详情失败',
								icon: 'none'
							});
							// 即使详情失败，也可以选择回传基本信息
							// if (this.eventChannel) {
							//     this.eventChannel.emit('onLocationSelect', basicLocationInfo);
							// }
							// uni.navigateBack();
						} finally {
							uni.hideLoading();
						}
					}
				}
			},
			// **核心修改：动态构建本地 mapUrl 的方法**
			loadMapWithLocation(lat, lng) {
				let localMapPath = '/static/map.html';
				let finalUrl = '';

				// #ifdef H5
				// H5平台，直接使用相对路径
				finalUrl = localMapPath;
				// #endif

				// #ifdef APP-PLUS
				// App平台，需要使用平台特定的绝对路径
				// 1. Android 平台路径
				// #ifdef android
				// Android的本地资源路径以 'file:///android_asset/www' 开头
				// finalUrl = `file:///android_asset/www${localMapPath}`;
				finalUrl = localMapPath;
				// #endif

				// 2. iOS 平台路径
				// #ifdef ios
				// iOS的本地资源在应用包的根目录下
				finalUrl = `file://${plus.io.convertLocalFileSystemURL(localMapPath)}`;
				// #endif
				// #endif
				
				// 拼接坐标参数
				if (lat && lng) {
					finalUrl += `?lat=${lat}&lng=${lng}`;
				}
				
				this.mapUrl = localMapPath;
				console.log('最终加载的本地地图URL:', this.mapUrl);
			}
		}
	}
</script>

<style>
.webview-container {
	width: 100%;
	height: 100vh;
}
</style>